<!--
 * @Author: your name
 * @Date: 2021-08-25 14:47:37
 * @LastEditTime: 2021-09-07 14:52:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \musicapp\src\components\swiperCom.vue
-->
<template>
<div class="swipe">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swiperImg" :key="item">
            <img :src="item.imageUrl" alt="">
        </van-swipe-item>
    </van-swipe>
</div>
</template>

<script>


import axios from 'axios'
import { reactive,onMounted } from 'vue'
import {getBanner} from '@/api/index.js'
export default {
    name:'swiperCom',
    setup(){
        
        let swiperImg = reactive([]);
        onMounted(async() => {
            let result = await getBanner()
            swiperImg.push(...result.data.banners)
        })
        
        return {
            swiperImg

        }
    },
    
}
</script>

<style lang="less">
.swipe{
    width: 7.5rem;
    height: 2.8rem;
    overflow: hidden;
}
  .my-swipe .van-swipe-item {
    width: 7.5rem;
    // height: 2.8rem;
    // line-height: 2.8rem;
    color: #fff;
    text-align: center;
    float: left;

  }
.my-swipe .van-swipe-item img{
    width: 100%;
}

</style>